<template>
  <el-card style="margin: 10px 20px 5px 20px">
    <span style="line-height:40px;font-size:20px;">签约详情</span>
  </el-card>
<!--  关联家庭成员弹窗-->
  <el-dialog title="关联家庭成员" v-model="dialogVisible" style="width:600px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="left">
      <el-form-item label="选择成员*">
        <el-select placeholder="请选择" v-model="searchDetailForm.familyMembers">
          <el-option label="？？" value="？？"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择关系*">
        <el-select placeholder="请选择" v-model="searchDetailForm.familyRelationship">
          <el-option label="父母" value="父母"></el-option>
          <el-option label="姐妹" value="姐妹"></el-option>
          <el-option label="配偶" value="配偶"></el-option>
          <el-option label="兄弟" value="兄弟"></el-option>
          <el-option label="兄妹" value="兄妹"></el-option>
          <el-option label="姐弟" value="姐弟"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

  </el-dialog>

  <el-card style="margin:0 20px;">
    <span style="line-height:30px;font-size:20px;">居民信息</span>
    <el-form label-width="80px" label-position="left">
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="姓名*">
            <el-input border-color="fff" readonly v-model="searchDetailForm.resname"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号*">
            <el-input border-color="fff" v-model="searchDetailForm.idNumber"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别*">
            <el-select placeholder="请选择" v-model="searchDetailForm.gender">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="出生年月*" >
            <el-date-picker type="date" format="YYYY-MM-DD" placeholder="选择日期" v-model="searchDetailForm.birthday" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话*" >
            <el-input border-color="fff" v-model="searchDetailForm.phone"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现居地">
            <el-input border-color="fff" v-model="searchDetailForm.presentAddress"/>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="居民标签">
            <el-select
                placeholder="请选择" v-model="searchDetailForm.residentTeg">
              <el-option label="？？" value="？？"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col >
          <el-form-item label="家庭成员">
            <el-row :gutter="10" v-if="familyList.length>0">
              <el-col :span="8" >
                <el-tag type="primary">
                  <span>{{familyList[0].familyMembers}}</span>
                </el-tag>
              </el-col>
              <el-col :span="8" v-if="familyList.length>1" >
                <el-tag type="primary">
                  <span>{{familyList[0].familyMembers}}</span>
                </el-tag>
              </el-col>
              <el-col :span="8" >
                  <el-button link type="primary" size="small" @click="dialogVisible=true">+关连家庭成员</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <span style="line-height:30px;font-size:20px;">签约信息</span>
    <el-form label-width="80px" label-position="left">
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="签约编号">
            <el-input border-color="fff" v-model="searchContractForm.contractId"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签约状态">
            <el-input readonly="待审核" v-model="searchContractForm.contractStatus"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签约机构">
            <el-select placeholder="请选择" v-model="searchContractForm.contractAgent">
              <el-option label="罗西社区服务中心" value="罗西社区服务中心"></el-option>
              <el-option label="天明社区服务中心" value="天明社区服务中心"></el-option>
              <el-option label="民进社区服务中心" value="民进社区服务中心"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="签约团队*">
            <el-select placeholder="请选择" v-model="searchContractForm.contractTeam">
              <el-option label="李明明团队" value="李明明团队"></el-option>
              <el-option label="王汉文团队" value="王汉文团队"></el-option>
              <el-option label="李民进团队" value="李民进团队"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签约医生">
            <el-select placeholder="请选择" v-model="searchContractForm.contractDoctor">
              <el-option label="李明明" value="李明明"></el-option>
              <el-option label="王汉文" value="王汉文"></el-option>
              <el-option label="李民进" value="李民进"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务包">
            <el-select placeholder="请选择" v-model="searchContractForm.contractservicePackage">
              <el-option label="基础包" value="基础包"></el-option>
              <el-option label="老年人基础包" value="老年人基础包"></el-option>
              <el-option label="慢性病护理包" value="慢性病护理包"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="签约类型">
            <el-input v-model="searchContractForm.contractType">首次签约</el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签约周期">
            <el-input v-model="searchContractForm.cycle">1年</el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签约费用">
            <el-input border-color="fff" v-model="searchContractForm.cost">￥120</el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="申请时间">
            <el-input border-color="fff" v-model="searchContractForm.applicationTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生效时间">
            <el-date-picker type="date" format="YYYY-MM-DD" placeholder="选择日期" v-model="searchContractForm.effectiveTime"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="签约备注">
            <el-input type="textarea" border-color="fff" v-model="searchContractForm.signingRemarks"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="save" >保存</el-button>
      <el-button @click="router.push('/UnderPay')">返回</el-button>
    </template>
  </el-card>

</template>
<script setup>
import {ref} from "vue";
import router from "@/router";

const dialogVisible = ref(false);
const handleClose = () => {
dialogVisible.value = false;
};
//定义数组用来保存居民家庭成员
const familyList = ref([])
//定义对象用来保存居民详情中的普通数据
const searchDetailForm = ref({
  familyMembers:'',
  familyRelationship:'',
  resname:'',
  idNumber:'',
  gender:'',
  birthday:'',
  phone:'',
  presentAddress :'',
  residentTeg:''
})
//定义对象用来保存居民签约信息
const searchContractForm = ref({
  contractId:'',
  contractStatus:'',
  contractAgent:'',
  contractTeam:'',
  contractDoctor:'',
  contractservicePackage:'',
  contractType:'',
  cycle:'',
  cost:'',
  applicationTime:'',
  effectiveTime:'',
  signingRemarks:''
})
const save = () => {
  //点击保存按钮后，将数据保存到数据库中

}



</script>


<style scoped>

</style>